<template>
	<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
		<el-col :span="24">
			<!-- 搜索栏 -->

			<!-- 表格 -->
			<el-table :data="tableData" style="width:865px;margin-left: 110px; margin-top: 165px;">
				<el-table-column prop="date" width="400" #default="scope">
					<div>
						<el-button type="text">
							<!--   头像 -->

							<div class="demo-type" style="margin-top: 20px;">
								<el-button type="text">
									<el-avatar :size="30" src="https://empty" @error="errorHandler">
										<img :src="scope.row.user_img">
									</el-avatar>
								</el-button>
							</div>
						</el-button>

						<div style="margin-top:-30px;margin-left:35px; height: 5px;">
							<el-button type="text"
								@click="gequ(scope.row)">{{scope.row.music_author}}—{{scope.row.music_name}}
							</el-button>
						</div>
						<div style="margin-top:20px;margin-left:35px;">
							{{scope.row.music_user_name}}—{{scope.row.music_time}}
						</div>
					</div>
				</el-table-column>

				<!--  表格右边的浏览量 -->
				<el-table-column prop="name" width="400" #default="scope">
					<div style="color:aliceblue;
		                      margin-top:14px;margin-left:300px;height:20px;width:40px
		  			        text-align: center;
		  					color: #88B9F9;
		  					">
						<svg style="margin-left: -80px;" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
							fill="currentColor" class="bi bi-hand-thumbs-up" viewBox="0 0 16 16">
							<path
								d="M8.864.046C7.908-.193 7.02.53 6.956 1.466c-.072 1.051-.23 2.016-.428 2.59-.125.36-.479 1.013-1.04 1.639-.557.623-1.282 1.178-2.131 1.41C2.685 7.288 2 7.87 2 8.72v4.001c0 .845.682 1.464 1.448 1.545 1.07.114 1.564.415 2.068.723l.048.03c.272.165.578.348.97.484.397.136.861.217 1.466.217h3.5c.937 0 1.599-.477 1.934-1.064a1.86 1.86 0 0 0 .254-.912c0-.152-.023-.312-.077-.464.201-.263.38-.578.488-.901.11-.33.172-.762.004-1.149.069-.13.12-.269.159-.403.077-.27.113-.568.113-.857 0-.288-.036-.585-.113-.856a2.144 2.144 0 0 0-.138-.362 1.9 1.9 0 0 0 .234-1.734c-.206-.592-.682-1.1-1.2-1.272-.847-.282-1.803-.276-2.516-.211a9.84 9.84 0 0 0-.443.05 9.365 9.365 0 0 0-.062-4.509A1.38 1.38 0 0 0 9.125.111L8.864.046zM11.5 14.721H8c-.51 0-.863-.069-1.14-.164-.281-.097-.506-.228-.776-.393l-.04-.024c-.555-.339-1.198-.731-2.49-.868-.333-.036-.554-.29-.554-.55V8.72c0-.254.226-.543.62-.65 1.095-.3 1.977-.996 2.614-1.708.635-.71 1.064-1.475 1.238-1.978.243-.7.407-1.768.482-2.85.025-.362.36-.594.667-.518l.262.066c.16.04.258.143.288.255a8.34 8.34 0 0 1-.145 4.725.5.5 0 0 0 .595.644l.003-.001.014-.003.058-.014a8.908 8.908 0 0 1 1.036-.157c.663-.06 1.457-.054 2.11.164.175.058.45.3.57.65.107.308.087.67-.266 1.022l-.353.353.353.354c.043.043.105.141.154.315.048.167.075.37.075.581 0 .212-.027.414-.075.582-.05.174-.111.272-.154.315l-.353.353.353.354c.047.047.109.177.005.488a2.224 2.224 0 0 1-.505.805l-.353.353.353.354c.006.005.041.05.041.17a.866.866 0 0 1-.121.416c-.165.288-.503.56-1.066.56z" />
						</svg>
						{{scope.row.music_tu}}
						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
							class="bi bi-star" viewBox="0 0 16 16">
							<path
								d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z" />
						</svg>
						{{scope.row.music_sc}}
					</div>
				</el-table-column>
			</el-table>



			<!-- 分页 -->
			<div style="margin-left: 110px;background-color: white;width:865px ;height: 40px;">
				<el-pagination style="margin-left: 300px;" v-model:current-page="page.pageNum"
					v-model:page-size="page.pageSize" layout="total, prev, pager, next, jumper" :total="page.total"
					@click="doList" />
			</div>
			<div class="grid-content ep-bg-purple"></div>
		</el-col>





	</el-tabs>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue'
	import type { TabsPaneContext, UploadInstance } from 'element-plus'
	import axios from 'axios';
	import { ElMessage } from 'element-plus';

	function gequ(t) {
		location.href = "/pagesIndex/play?music_id=" + t.music_id;
	}
	// 表格数据展现
	const tableData = ref([

	]);
	const music = ref({
		music_author: "",
		music_type: "",
		music_date: "",
		music_time: "",
		music_rm: "",
		music_sc: "",
		music_tu: "",
		music_zhou: "",
		music_user_id: ''
	});
	const page = ref({
		pageNum: 1,
		pageSize: 10,
		pages: 0,
		total: 0,
	})

	const you = ref('')
	const user = ref({
		user_id: ''
	})
	const doList = () => {
		try {
			music.value.music_user_id = window.location.search.split('?')[1].split('=')[1]
		} catch (e) {
			music.value.music_user_id = ''
		}
		axios({
			url: '/api/music/list1',
			method: 'GET',
			params: Object.assign({}, music.value, { pageNum: page.value.pageNum, pageSize: page.value.pageSize })
		}).then(response => {
			// console.log(response.data)

			tableData.value = response.data.list;
			tableData.value.forEach(item => {
				item.user_img = "/api/src/images/" + item.user_img;
			});
			console.log(tableData.value);
			// 分页信息
			page.value.pages = response.data.pages;
			page.value.total = response.data.total;

			console.log(response.data.total);
		});
	};





	const activeName = ref('first')



	const handleClick = (tab : TabsPaneContext, event : Event) => {
		console.log(tab, event)
	}


	onMounted(() => {
		doList()
	});
</script>
<style scoped>
	#m2 {
		height: 300px;
		position: relative;
	}

	#m2 img {
		width: 1170px;
		height: 100%;
		float: left;
		display: none;
	}

	#m2 img:first-child {
		display: block;
	}

	#ss-hover {}

	.el-row {
		margin-bottom: 20px;
	}

	.el-row:last-child {
		margin-bottom: 0;
	}

	.el-col {
		border-radius: 4px;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.demonstration {
		color: var(--el-text-color-secondary);
	}

	.el-carousel__item h3 {
		color: #475669;
		opacity: 0.75;
		line-height: 150px;
		margin: 0;
		text-align: center;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n + 1) {
		background-color: #d3dce6;
	}
</style>